<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>系统登录</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>
    <!-- Axios for HTTP requests -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        :root {
            --primary-color: #4361ee;
            --primary-light: #5a75f0; /* 添加主色调亮色 */
            --secondary-color: #3f37c9;
            --accent-color: #4cc9f0;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4ade80;
            --error-color: #f87171;
            --warning-color: #fbbf24;
            --input-border: #e1e5eb;
            --input-focus-border: #4361ee;
            --input-shadow: rgba(67, 97, 238, 0.2);
            --btn-hover-shadow: rgba(67, 97, 238, 0.35);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        .login-container {
            display: flex;
            width: 900px;
            height: 550px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            position: relative;
            z-index: 10;
        }

        .login-illustration {
            flex: 1;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .login-illustration::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            top: -80px;
            left: -80px;
        }

        .login-illustration::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            bottom: -80px;
            right: -80px;
        }

        .login-illustration h2 {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 15px;
            z-index: 2;
            text-align: center;
        }

        .login-illustration p {
            font-size: 1rem;
            opacity: 0.9;
            text-align: center;
            max-width: 80%;
            z-index: 2;
        }

        .login-form {
            flex: 1;
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .logo-container {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo-container img {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
        }

        .logo-container h1 {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 5px;
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group label {
            position: absolute;
            top: 12px;
            left: 15px;
            color: #777;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .form-control {
            width: 100%;
            height: 50px;
            padding: 15px 15px 5px 15px;
            border: 2px solid var(--input-border);
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background-color: #fafcff;
        }

        .form-control:focus {
            border-color: var(--input-focus-border);
            box-shadow: 0 0 0 4px var(--input-shadow);
            outline: none;
            background-color: white;
        }

        .form-control:focus + label,
        .form-control:not(:placeholder-shown) + label {
            top: 5px;
            font-size: 0.75rem;
            color: var(--primary-color);
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 15px;
            cursor: pointer;
            color: #777;
            transition: color 0.2s ease;
        }

        .password-toggle:hover {
            color: var(--primary-color);
        }

        /* 重点优化：按照注册按钮样式修改登录按钮 */
        .btn-login {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            height: 65px; /* 增加按钮高度 */
            border-radius: 12px;
            font-size: 1.25rem;
            font-weight: 600;
            margin-top: 20px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.5px;
        }

        .btn-login i {
            margin-right: 10px;
            font-size: 1.1em;
            position: static;
            color: inherit;
        }

        .btn-login:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px var(--btn-hover-shadow);
            background: linear-gradient(to right, var(--primary-light), var(--primary-color));
        }

        .btn-login:active {
            transform: translateY(1px);
        }

        .btn-login::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: 0.5s;
        }

        .btn-login:hover::after {
            left: 100%;
        }

        .login-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            font-size: 0.9rem;
        }

        .remember-me {
            display: flex;
            align-items: center;
        }

        .remember-me input {
            margin-right: 5px;
        }

        .forgot-password {
            color: var(--primary-color);
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

        .forgot-password::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }

        .forgot-password:hover {
            color: var(--secondary-color);
        }

        .forgot-password:hover::after {
            width: 100%;
        }

        .registration {
            text-align: center;
            margin-top: 25px;
            font-size: 0.95rem;
        }

        .registration a {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

        .registration a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }

        .registration a:hover {
            color: var(--secondary-color);
        }

        .registration a:hover::after {
            width: 100%;
        }

        .social-login {
            margin-top: 25px;
            text-align: center;
        }

        .social-login p {
            position: relative;
            margin-bottom: 20px;
            color: #777;
        }

        .social-login p::before,
        .social-login p::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 30%;
            height: 1px;
            background: #e1e5eb;
        }

        .social-login p::before {
            left: 0;
        }

        .social-login p::after {
            right: 0;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .social-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f0f4f8;
            color: #777;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .social-icon:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .social-icon.google:hover {
            background: #dd4b39;
            color: white;
        }

        .social-icon.facebook:hover {
            background: #3b5998;
            color: white;
        }

        .social-icon.twitter:hover {
            background: #1da1f2;
            color: white;
        }

        .error-message {
            background-color: var(--error-color);
            color: white;
            padding: 12px 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: none;
            font-size: 0.95rem;
            animation: shake 0.5s;
        }

        .success-message {
            background-color: var(--success-color);
            color: white;
            padding: 12px 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: none;
            font-size: 0.95rem;
        }

        .floating-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .floating-item {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .floating-item:nth-child(1) {
            width: 150px;
            height: 150px;
            top: 10%;
            left: 5%;
            animation: float 15s infinite linear;
        }

        .floating-item:nth-child(2) {
            width: 80px;
            height: 80px;
            top: 20%;
            right: 10%;
            animation: float 12s infinite linear reverse;
        }

        .floating-item:nth-child(3) {
            width: 120px;
            height: 120px;
            bottom: 15%;
            left: 15%;
            animation: float 18s infinite linear;
        }

        .floating-item:nth-child(4) {
            width: 60px;
            height: 60px;
            bottom: 25%;
            right: 20%;
            animation: float 14s infinite linear reverse;
        }

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-30px) rotate(180deg);
            }
            100% {
                transform: translateY(0) rotate(360deg);
            }
        }

        /* 添加按钮加载动画 */
        .fa-spinner {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-8px); }
            40%, 80% { transform: translateX(8px); }
        }

        /* Responsive styles */
        @media (max-width: 992px) {
            .login-container {
                width: 700px;
                height: 500px;
            }
        }

        @media (max-width: 768px) {
            .login-container {
                width: 90%;
                height: auto;
                flex-direction: column;
            }

            .login-illustration {
                padding: 30px;
            }

            .login-illustration h2 {
                font-size: 1.8rem;
            }

            .login-form {
                padding: 40px 30px;
            }

            /* 移动端调整按钮大小 */
            .btn-login {
                height: 60px;
                font-size: 1.2rem;
            }
        }

        @media (max-width: 480px) {
            .login-container {
                width: 95%;
            }

            .login-illustration {
                padding: 20px 15px;
            }

            .login-form {
                padding: 30px 20px;
            }

            .logo-container h1 {
                font-size: 1.8rem;
            }

            /* 移动端进一步调整按钮大小 */
            .btn-login {
                height: 58px;
                font-size: 1.15rem;
            }
        }
    </style>
</head>

<body>
<div id="app">
    <!-- Floating background elements -->
    <div class="floating-bg">
        <div class="floating-item"></div>
        <div class="floating-item"></div>
        <div class="floating-item"></div>
        <div class="floating-item"></div>
    </div>

    <div class="login-container">
        <div class="login-illustration">
            <h2>欢迎回来</h2>
            <p>请登录您的账户以访问系统所有功能和管理面板</p>
            <img src="https://cdn-icons-png.flaticon.com/512/3209/3209260.png" alt="Login Illustration" style="width: 70%; margin-top: 30px;">
        </div>

        <div class="login-form">
            <div class="logo-container">
                <img src="https://cdn-icons-png.flaticon.com/512/6681/6681204.png" alt="App Logo">
                <h1>系统登录</h1>
            </div>

            <div class="error-message" v-if="showError">
                <i class="fas fa-exclamation-circle"></i> {{ errorMessage }}
            </div>

            <div class="success-message" v-if="showSuccess">
                <i class="fas fa-check-circle"></i> 登录成功！正在跳转...
            </div>

            <div class="form-group">
                <input type="text" class="form-control" id="username" v-model="username" placeholder=" " @focus="handleInputFocus" @blur="handleInputBlur">
                <label for="username"><i class="fas fa-user"></i> 用户名</label>
            </div>

            <div class="form-group">
                <input :type="showPassword ? 'text' : 'password'" class="form-control" id="password" v-model="password" placeholder=" " @focus="handleInputFocus" @blur="handleInputBlur">
                <label for="password"><i class="fas fa-lock"></i> 密码</label>
                <span class="password-toggle" @click="togglePasswordVisibility">
                    <i :class="showPassword ? 'far fa-eye-slash' : 'far fa-eye'"></i>
                </span>
            </div>

            <!-- 使用注册按钮样式的登录按钮 -->
            <button class="btn btn-login" @click="handleLogin" :disabled="isLoading">
                <i :class="isLoading ? 'fas fa-spinner fa-spin' : 'fas fa-sign-in-alt'"></i>
                {{ isLoading ? '登录中...' : '登录系统' }}
            </button>

            <div class="login-options">
                <div class="remember-me">
                    <input type="checkbox" id="rememberMe" v-model="rememberMe">
                    <label for="rememberMe">记住密码</label>
                </div>
                <a href="#" class="forgot-password" data-bs-toggle="modal" data-bs-target="#passwordModal">
                    忘记密码?
                </a>
            </div>

            <div class="registration">
                还没有账号? <a href="/register">立即注册</a>
            </div>

            <div class="social-login">
                <p>其他方式登录</p>
                <div class="social-icons">
                    <a href="#" class="social-icon google" @click.prevent="socialLogin('google')">
                        <i class="fab fa-google"></i>
                    </a>
                    <a href="#" class="social-icon facebook" @click.prevent="socialLogin('facebook')">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="social-icon twitter" @click.prevent="socialLogin('twitter')">
                        <i class="fab fa-twitter"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Forgot Password Modal -->
    <div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="passwordModalLabel">重置密码</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>请输入您的注册邮箱，我们将发送重置密码的链接到您的邮箱。</p>
                    <div class="form-group mt-3">
                        <input type="email" class="form-control" id="resetEmail" v-model="resetEmail" placeholder=" " @focus="handleInputFocus" @blur="handleInputBlur">
                        <label for="resetEmail"><i class="fas fa-envelope"></i> 邮箱地址</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="handleResetPassword">发送重置链接</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    const { createApp } = Vue;

    createApp({
        data() {
            return {
                username: '',
                password: '',
                rememberMe: false,
                showPassword: false,
                isLoading: false,
                showError: false,
                errorMessage: '用户名或密码错误',
                showSuccess: false,
                resetEmail: ''
            }
        },
        methods: {
            togglePasswordVisibility() {
                this.showPassword = !this.showPassword;
            },
            handleInputFocus(event) {
                const label = event.target.nextElementSibling;
                label.style.top = '5px';
                label.style.fontSize = '0.75rem';
                label.style.color = 'var(--primary-color)';
            },
            handleInputBlur(event) {
                const label = event.target.nextElementSibling;
                if (!event.target.value) {
                    label.style.top = '12px';
                    label.style.fontSize = '1rem';
                    label.style.color = '#777';
                }
            },
            async handleLogin() {
                // Hide previous messages
                this.showError = false;
                this.showSuccess = false;

                // Simple validation
                if (!this.username || !this.password) {
                    this.errorMessage = "请输入用户名和密码";
                    this.showError = true;
                    return;
                }

                this.isLoading = true;

                const loginData = {
                    username: this.username,
                    password: this.password,
                    rememberMe: this.rememberMe
                };

                try {
                    const response = await axios.post('/login/login', loginData);

                    if (response.data.code === 0) {
                        this.showSuccess = true;

                        // Redirect after success
                        setTimeout(() => {
                            window.location.href = '/main';
                        }, 1500);
                    } else {
                        this.errorMessage = response.data.msg || '用户名或密码错误';
                        this.showError = true;
                    }
                } catch (error) {
                    this.errorMessage = '请求错误: ' + (error.response?.data?.message || error.message);
                    this.showError = true;
                } finally {
                    this.isLoading = false;
                }
            },
            handleResetPassword() {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

                if (!this.resetEmail) {
                    alert("请输入您的邮箱地址");
                    return;
                }

                if (!emailRegex.test(this.resetEmail)) {
                    alert("请输入有效的邮箱地址");
                    return;
                }

                // Here you would typically make an API call to send the reset email
                // For now, we'll just show a success message
                alert("重置密码链接已发送到您的邮箱！");

                // Close the modal after a delay
                setTimeout(() => {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('passwordModal'));
                    if (modal) {
                        modal.hide();
                    }
                }, 1000);
            },
            socialLogin(provider) {
                // Handle social login logic here
                console.log(`Logging in with ${provider}`);
                // You would typically redirect to the provider's authentication page
                // window.location.href = `/auth/${provider}`;
            }
        },
        mounted() {
            // Initialize Bootstrap tooltips if needed
            // [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')).forEach(function (tooltipTriggerEl) {
            //     new bootstrap.Tooltip(tooltipTriggerEl);
            // });
        }
    }).mount('#app');
</script>
</body>
</html>